<template>
  <div id="loginBox">
      <TopBarX>{{this.title}}</TopBarX>
      <div id="loginContentBox">
        <h1 v-if="showTitle">欢迎登录</h1>
        <LoginInput title="手机号" @getValue="getPhone"></LoginInput>
        <LoginInput type="pwd" title="密码" @getValue="getPwd"></LoginInput>
        <div id="loginBtn" @click="login">登录</div>
        <a id="forgetBtn" href="/forget">忘记密码</a>
      </div>
      <toast 
        v-model="showPositionValue" 
        type="text" 
        :time="2000" 
        is-show-mask 
        :text="msg" 
        position="middle"></toast>
  </div>
</template>
<script>
import TopBarX from '../../component/common/TopBarX'
import LoginInput from '../../component/common/LoginInput'
import { Toast } from 'vux'
import {verify,showMsg,setStore,getStore,setLStore} from '../../../config/mUtils'
import {login} from '../../../service/getData'
import { clearTimeout } from 'timers';
import {getSDK} from '../../../service/wxShare.js'

let time = null
export default {
  components:{
    TopBarX,
    LoginInput,
    Toast,
  },
  beforeCreate(){
    getSDK()
  },
  data(){
    return {
      showTitle:true,
      msg:'',
      showPositionValue:false,
      title:'',
      phone:'',
      pwd:''
    }
  },
  computed:{
    // bg(){
    //   if(this.phone.length != 0 && this.pwd.length != 0){
    //     return 'backgroundColor:#e44c2c'
    //   }
    // }
  },
  methods:{
    getPhone(data){
      this.phone = data
    },
    getPwd(data){
      this.pwd = data
    },
    login(){
      if(this.phone == ''){
        showMsg('手机号不能为空',this)
      }else if(this.pwd == ''){
        showMsg('密码不能为空',this)
      }else if(!verify(this.phone,1)){
        showMsg("手机号格式错误",this)
      }else if(!verify(this.pwd,2)){
        showMsg("密码为6-16位非汉字字符",this)
      }else{
        login(this.phone,this.pwd)
          .then(res=>{
            // //console.log(res)
            if(res.status == 1){
              setStore('loginkey',res.info.loginkey);
              setStore('phone',res.info.loginname)

              setLStore('loginkey',res.info.loginkey)
              setLStore('phone',res.info.loginname)
              setLStore('expiretime',new Date().getTime()+14*24*60*60*1000)

              time = setTimeout(()=>{
                if(getStore('pre') == '/productDetail'){
                  this.$router.replace(getStore('pre')+'?pid='+getStore('pid'))
                }else{
                  this.$router.replace(getStore('pre'))
                }
              },2000)
            }
            showMsg(res.msg,this)
          })
      }
    }
  },
  beforeDestroy(){
    clearTimeout(time)
  }
}
</script>
<style lang="less">
    #loginBox{
      width: 9.2rem;
      margin: 0 auto;
      background-color: #fff;
      #loginContentBox{
        margin-top:.2rem;
        padding-left: 0.4267rem;
        padding-right: 0.5333rem;
        #loginBtn{
          width: 100%;
          height: 1.2rem;
          background-color: #e44c2c;
          border-radius: 2rem;
          margin-top: 1.0667rem;
          color: #fff;
          text-align: center;
          line-height: 1.2rem;
          font-size: 0.5rem;
        }
        #forgetBtn{
          margin-top: 0.72rem;
          display: block;
          text-align: center;
          font-size: .46rem;
        }
      }
      .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
    }
</style>
